export default {
  mounted(el) {
    el.style.position = "absolute"; // 让元素可自由定位
    el.style.cursor = "grab";

    let startX, startY, offsetX, offsetY;

    const handleMouseDown = (e) => {
      startX = e.clientX;
      startY = e.clientY;
      offsetX = el.offsetLeft;
      offsetY = el.offsetTop;
      el.style.cursor = "grabbing";

      document.addEventListener("mousemove", handleMouseMove);
      document.addEventListener("mouseup", handleMouseUp);
    };

    const handleMouseMove = (e) => {
      const dx = e.clientX - startX;
      const dy = e.clientY - startY;

      el.style.left = `${offsetX + dx}px`;
      el.style.top = `${offsetY + dy}px`;
    };

    const handleMouseUp = () => {
      el.style.cursor = "grab";
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    };

    el.addEventListener("mousedown", handleMouseDown);

    // 在卸载时清理事件监听
    el._removeEventListeners = () => {
      el.removeEventListener("mousedown", handleMouseDown);
    };
  },
  unmounted(el) {
    el._removeEventListeners();
  }
}
